<template>
  <div>
    <div style="width: 800px">
      <div id="app" class="search-container">
        <input v-model="likeName" type="text" placeholder="输入关键字搜索帖子:">
        <button class="search-btn" @click="getPostList()">搜索</button>
        <button class="reset-btn" @click="reset()">重置</button>
      </div>
      <div class="hashtags">
        <span class="hashtag" @click="getPostListAllLabel()">全部</span>
        <span
          v-for="(label, index) in labelList"
          :key="index"
          class="hashtag"
          @click="getPostListByLabel(label.labelId)"
        ># {{ label.labelName }}</span>
        <select v-model="sort" @change="getPostList()">
          <option value="1" selected>按时间排序</option>
          <option value="2">按点赞量排序</option>
          <option value="3">按收藏量排序</option>
          <option value="4">按浏览量排序</option>
        </select>
      </div>
    </div>
    <div class="waterfall-grid">
      <div v-for="(item, index) in postList" :key="index" class="container">
        <div class="image-wrapper">
          <video v-if="isVideo(item.postPhoto)" :src="item.postPhoto" controls @click="commentDetails(item)" />
          <img v-else :src="item.postPhoto" alt="主图片" @click="commentDetails(item)">
          <span class="title">{{ item.postTitle }}</span>
        </div>
        <div class="user-info">
          <img class="user-icon" :src="item.photo" @click="toHome(item.userId)" alt="用户图标">
          <span>{{ item.name }}</span>
          <div class="checkbox-wrapper">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              class="heart-icon"
              @click="praisePost(item)"
            >
              <path
                d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                :fill="item.isPraise ? 'red' : 'gray'"
              />
            </svg>
            <span class="like-count">{{ item.postPraise }}</span>
          </div>
        </div>
      </div>
    </div>
    <blog-detall ref="postDetails" @commentDetails="commentDetails" @setLabelId="setLabelId" @getPostList="getPostList" />
  </div>
</template>
<script>
import { getAction, postAction } from '@/utils/xhs-ajax'
import blogDetall from '@/views/blogManager/detall/blogDetall.vue'

export default {
  components: {
    blogDetall
  },
  data() {
    return {
      postList: [],
      labelList: [],
      sort: 1,
      labelId: null,
      likeName: null
    }
  },
  created() {
    this.getPostList()
    this.getLabelList()
  },
  methods: {
    toHome(userId) { // 跳转到他人主页
      this.$router.push({ name: 'toUserHome', params: { id: userId }})
    },
    isVideo(file) {
      if (!file) return false // 确保 file 不为空
      const ext = file.split('.').pop().toLowerCase()
      return ['mp4', 'avi', 'mov'].includes(ext)
    },
    getPostList() {
      getAction('/post/check.do', { sort: this.sort, labelId: this.labelId, likeName: this.likeName }).then(resp => {
        this.postList = resp.data
      })
    },
    setLabelId(labelId) {
      this.labelId = labelId
    },
    getLabelList() {
      getAction('/post/getLabel.do', {}).then(resp => {
        this.labelList = resp.data
      })
    },
    getPostListByLabel(labelId) {
      this.labelId = labelId
      this.getPostList()
    },
    getPostListAllLabel() {
      this.labelId = null
      this.getPostList()
    },
    reset() {
      this.sort = 1
      this.labelId = null
      this.likeName = null
      this.getPostList()
    },
    praisePost(item) {
      const id = item.postId
      item.isPraise = !item.isPraise
      if (item.isPraise) {
        item.postPraise++
      } else {
        item.postPraise--
      }
      postAction('/post/praisePost.do', { postId: id }).then(resp => {
        this.getPostList()
      })
    },
    commentDetails(item) {
      console.log(item)
      getAction('/post/commentDetails.do?postId=' + item.postId, {}).then(resp => {
        this.$refs.postDetails.commentList = resp.data
        this.$refs.postDetails.dialogVisible = true
        this.$refs.postDetails.post = item
      })
    }
  }
}
</script>

<style scoped lang="scss">
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
.search-container input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-container button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}
.search-container .search-btn {
  background-color: #4CAF50;
  color: white;
}
.search-container .reset-btn {
  background-color: #f44336;
  color: white;
}
.waterfall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); // 使用CSS Grid的自动填充功能，每列最小宽度为250px
  gap: 10px; // 网格项之间的间距
}
:root {
  --main-border-color: #ccc;
  --margin-size: 10px;
}

.container {
  width: 300px;
  height: auto;
  border: 1px solid var(--main-border-color);
  padding: var(--margin-size);
  box-sizing: border-box;
}

.image-wrapper img {
  width: 300px;
  height: 300px;
  border-bottom: 1px solid var(--main-border-color);
  margin-bottom: var(--margin-size);
  border-radius: 5%;
}
.image-wrapper video {
  width: 300px;
  height: 300px;
  border-bottom: 1px solid var(--main-border-color);
  margin-bottom: var(--margin-size);
  border-radius: 5%;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: var(--margin-size);
}

.user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--margin-size);
}

.user-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.user-info span {
  font-size: 14px;
}

.checkbox-wrapper {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.heart-icon {
  cursor: pointer;
}

.like-count {
  font-size: 14px;
  color: #888;
  margin-left: 5px;
}
.hashtags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hashtag {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 5px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
</style>
